<template>
    <div
        :id="id"
        :class="className"
        :style="{ height: height, width: width }"
    />
</template>

<script>
import echarts from 'echarts'
import resize from './mixins/resize'

export default {
	mixins: [resize],
	props: {
		className: {
			type: String,
			default: 'chart'
		},
		id: {
			type: String,
			default: 'chart'
		},
		width: {
			type: String,
			default: '200px'
		},
		height: {
			type: String,
			default: '200px'
		}
	},
	data() {
		return {
			chart: null
		}
	},
	mounted() {
		this.initChart()
	},
	beforeDestroy() {
		if (!this.chart) {
			return
		}
		this.chart.dispose()
		this.chart = null
	},
	methods: {
		initChart() {
			this.chart = echarts.init(document.getElementById(this.id))

			const xAxisData = []
			const data = []
			const data2 = []
			for (let i = 0; i < 50; i++) {
				xAxisData.push(i)
				data.push((Math.sin(i / 5) * (i / 5 - 10) + i / 6) * 5)
				data2.push((Math.sin(i / 5) * (i / 5 + 10) + i / 6) * 3)
			}
			this.chart.setOption({
				backgroundColor: '#08263a',
				grid: {
					left: '5%',
					right: '5%'
				},
				xAxis: [
					{
						show: false,
						data: xAxisData
					},
					{
						show: false,
						data: xAxisData
					}
				],
				visualMap: {
					show: false,
					min: 0,
					max: 50,
					dimension: 0,
					inRange: {
						color: ['#4a657a', '#308e92', '#b1cfa5', '#f5d69f', '#f5898b', '#ef5055']
					}
				},
				yAxis: {
					axisLine: {
						show: false
					},
					axisLabel: {
						textStyle: {
							color: '#4a657a'
						}
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: '#08263f'
						}
					},
					axisTick: {
						show: false
					}
				},
				series: [
					{
						name: 'back',
						type: 'bar',
						data: data2,
						z: 1,
						itemStyle: {
							normal: {
								opacity: 0.4,
								barBorderRadius: 5,
								shadowBlur: 3,
								shadowColor: '#111'
							}
						}
					},
					{
						name: 'Simulate Shadow',
						type: 'line',
						data,
						z: 2,
						showSymbol: false,
						animationDelay: 0,
						animationEasing: 'linear',
						animationDuration: 1200,
						lineStyle: {
							normal: {
								color: 'transparent'
							}
						},
						areaStyle: {
							normal: {
								color: '#08263a',
								shadowBlur: 50,
								shadowColor: '#000'
							}
						}
					},
					{
						name: 'front',
						type: 'bar',
						data,
						xAxisIndex: 1,
						z: 3,
						itemStyle: {
							normal: {
								barBorderRadius: 5
							}
						}
					}
				],
				animationEasing: 'elasticOut',
				animationEasingUpdate: 'elasticOut',
				animationDelay(idx) {
					return idx * 20
				},
				animationDelayUpdate(idx) {
					return idx * 20
				}
			})
		}
	}
}
</script>
